<template>
  <footer>
    <span
      class="background-grow transition-all duration-600 ease-in-out"
      absolute=""
      pointer-events-none=""
      rounded-full=""
      z--1=""
      bg-gradient-to-r=""
      from-hex-cfc859=""
      via-hex-4dbd7f=""
      to-hex-4dbdac=""
      op75=""
      dark:op50=""
      :style="style"
    ></span>
  </footer>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';

const style = ref({
  top: '10%',
  left: '50%',
  width: '520px',
  height: '520px',
  transform: 'translate(-50%, -50%) rotate(-45deg)',
  filter: 'blur(140px)',
});

watch(
  () => $slidev.nav.currentPage,
  (res) => {
    if (res === 1) {
      style.value.top = '10%';
      style.value.left = '50%';
      style.value.width = '520px';
      style.value.height = '520px';
      style.value.filter = 'blur(140px)';
    }
    if (res === 2) {
      style.value.top = '-10%';
      style.value.left = '5%';
      style.value.width = '500px';
      style.value.height = '500px';
      style.value.filter = 'blur(140px)';
    }
    if (res === 3) {
      style.value.left = '50%';
      style.value.top = '45%';
      style.value.width = '300px';
      style.value.height = '300px';
      style.value.filter = 'blur(100px)';
    }
    if (res === 4) {
      style.value.left = '50%';
      style.value.top = '45%';
      style.value.width = '500px';
      style.value.height = '500px';
      style.value.filter = 'blur(100px)';
    }
    if (res === 5) {
      style.value.left = '0%';
      style.value.top = '0%';
      style.value.width = '500px';
      style.value.height = '500px';
      style.value.filter = 'blur(100px)';
    }
    if (res === 6) {
      style.value.left = '50%';
      style.value.top = '50%';
      style.value.width = '200px';
      style.value.height = '200px';
      style.value.filter = 'blur(100px)';
    }
    if (res === 7) {
      style.value.left = '0%';
      style.value.top = '0%';
      style.value.width = '500px';
      style.value.height = '500px';
      style.value.filter = 'blur(100px)';
    }
    if (res === 8) {
      style.value.left = '-10%';
      style.value.top = '110%';
      style.value.width = '500px';
      style.value.height = '500px';
      style.value.filter = 'blur(100px)';
    }
  }
);
</script>
<style scoped lang="scss"></style>
